import React, { useState, useEffect } from 'react';
import { Table, Image, Space, Button } from 'antd';
import { getBannerList } from '../../api/banner';

function Index() {
  const [bannerList, setBannerList] = useState([]);

  useEffect(() => {
    getBannerList().then((res) => {
      setBannerList(res.data.data);
    });
  }, []);

  // 设置表格
  const columns = [
    { title: '序号', render: (text, record, index) => <span>{index + 1}</span> },
    {
      title: '图片',
      dataIndex: 'img',
      // text 相当于上面的 img 字段
      // record 相当于每一条数据的对象
      // index 索引值
      render: (text, record, index) => {
        return <Image src={text} width={200} height={100} />;
      }
    },
    { title: '链接', dataIndex: 'link' },
    { title: '提示', dataIndex: 'alt' },
    {
      title: '操作',
      render: (text, record, index) => {
        return (
          <Space>
            <Button type='danger'>删除</Button>
          </Space>
        );
      }
    }
  ];

  return (
    <div>
      <Table rowKey={(record) => record.bannerid} dataSource={bannerList} columns={columns} />
    </div>
  );
}

export default Index;
